import { useEffect, useState } from 'react'
import {bindActionCreators} from 'redux'
import store from '../../store'

function add1() {
  return {type: 'ADD1'}
}
function add2() {
  return {type: 'ADD2'}
}
function allAdd() {
  return {type: 'ALLADD'}
}
const actions = {add1, add2, allAdd}
export const boundActions = bindActionCreators(actions, store.dispatch) // 这边在 react-redux 源码中有用到

function Exp() {
  // console.log(store.getState())
  console.log('render')
  const {counter1, counter2} = store.getState()
  const [, update] =  useState(0)
  useEffect(()=>{
    let unSubscribe = store.subscribe(()=>{
      console.log('update')
      update(x=>x+1)
    })
    return unSubscribe
  }, [])
  // console.log(boundActions.add1.toString())
  return (
    <>
      <div>counter1: {counter1.number}</div>
      <div>counter2: {counter2.number}</div>
      {/* <button onClick={()=>store.dispatch({type: 'ADD'})}>+++</button>
      <button onClick={()=>store.dispatch({type: 'MINUS'})}>---</button> */}
      <button onClick={boundActions.add1}>boundActions1 ADD</button>
      <button onClick={boundActions.add2}>boundActions2 ADD</button>
      <button onClick={boundActions.allAdd}>boundActions ALLADD</button>
      {/* <button onClick={boundActions.minus}>---</button> */}
    </>

  )
}

export default Exp